<template>
  <Card style="width: 100%;" title="项目登记">
    <Form name="user" ref="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <Row>
        <Col :span="8">
          <FormItem name="resourceName" label="项目名称">
            <Input placeholder="请输入项目名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="resourceType" label="项目密级">
            <Select placeholder="资源类型" style="width: 100%">
              <Option label="内部" value="内部" />
              <Option label="公开" value="公开" />
            </Select>
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="groupName" label="委托单位">
            <Input placeholder="请输入委托单位" style="width: 100%" />
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col :span="8">
          <FormItem name="resourceIp" label="源库类型">
            <InputSearch
              placeholder="请输入源库类型"
              style="width: 100%"
              @search="onSearch"
            />
          </FormItem>
        </Col>
        <Col :span="8">
          <FormItem name="groupName" label="业务系统名称">
            <Input placeholder="请输入业务系统名称" style="width: 100%" />
          </FormItem>
        </Col>
        <Col :span="5" :offset="3">
          <Button type="primary" style="margin-right: 10px" size="md"
            >查询</Button
          >
          <Button type="primary" style="margin-right: 10px" size="md"
            >重置</Button
          >
          <a href="#" style="color: #b30000"
            >更多 <Icon name="down" style="vertical-align: middle"
          /></a>
        </Col>
      </Row>
    </Form>
    <div
      style="
        width: 100%;
        height: 2px;
        background-color: #e9ebf0;
        margin: 20px 0;
      "
    ></div>
    <Button
      @click="addItem"
      type="primary"
      style="margin-right: 10px; margin-bottom: 20px"
      size="md"
      ><Icon name="add" /> 新增</Button
    >
    <Table
      :columns="columns3"
      :dataSource="data"
      :bordered="false"
      @change="handleTableChange"
      :pagination="{
        total: data.length,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSize,
        current,
      }"
    >
      <template #paginationTotal="props">
        <span>总共{{ props.total }} 条</span>
      </template>
    </Table>
  </Card>
</template>

<script>
export default {
  data() {
    return {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 12,
      },
      data: [
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "2",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
         {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
         {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
         {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
         {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
         {
          id: "3",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
        {
          id: "4",
          itemName: "OA国产化替代项目",
          itemNumber: "202201031",
          resourceBaseType: "Oracle 11g",
          dataBaseType: "标准版-v1.0",
          applyName: "xx公司OA管理平台",
          joinTime: "2017-10-31 12:13:00",
        },
      ],
      columns3: [
        { title: "序号", dataIndex: "id", key: "id" },
        { title: "项目名称", dataIndex: "itemName", key: "itemName" },
        {
          title: "项目编号",
          dataIndex: "itemNumber",
          key: "itemNumber",
        },
        {
          title: "源库类型",
          dataIndex: "resourceBaseType",
          key: "resourceBaseType",
        },
        {
          title: "目标数据库类型",
          dataIndex: "dataBaseType",
          key: "dataBaseType",
        },
        { title: "应用名称", dataIndex: "applyName", key: "applyName" },
        { title: "项目开始时间", dataIndex: "joinTime", key: "joinTime" },
      ],
      current: 1,
      pageSize: 5,
    };
  },
  methods: {
    handleTableChange(p, filters) {
      const { current, pageSize } = p;
      this.current = current;
      this.pageSize = pageSize;
      console.log("===>>>>filters", p, filters);
    },
    onSearch(value, e) {
      console.log("value", value, e);
    },
    addItem() {
      this.$router.push('/registrationForm')
    }
  },
};
</script>


